<template>
  <div class="w100 flex-x flex-top h-full">
    <!-- <TreeBox style="width: 18%"></TreeBox> -->
    <div style="width: 100%">
      <Search
        :device-row="deviceRow"
        style="margin-bottom: 10px"
        @onSubmit="onSearch"
      />
      <TaskTable
        :assignment-token="assignmentToken"
        :device-row="deviceRow"
        :table-data="tableData"
        style="width: 100%"
      />
      <Pagination
        class="dark_theme"
        :total="total"
        :page.sync="pageNum"
        :limit.sync="pageSize"
        :page-sizes.sync="pageSizes"
        @pagination="pagination"
      />
    </div>
  </div>
</template>

<script>
import TreeBox from "../../deviceOperation/components/TreeBox.vue";
import TaskTable from "./components/TaskTable.vue";
import Search from "./components/Search.vue";
import { useTable } from "../../js/utils";
import { mixinOpenedKey } from "@/mixin/openedKey.js";
import Pagination from "@/views/common/page";
import { paginationMixins } from "@/mixin/pagination";
import { getTaskFeedback } from "@/api/deviceOperation";
import { mapGetters } from "vuex";

export default {
  components: { TreeBox, TaskTable, Search, Pagination },
  mixins: [mixinOpenedKey, paginationMixins],
  props: {
    deviceRow: {
      type: Object,
      default: {}
    }
  },
  computed: {
    ...mapGetters(["deviceTreeData", "controlDeviceInfo"]),
    // 设备toekn
    deviceToken() {
      return this.controlDeviceInfo.token;
    },
    // 分配token
    assignmentToken() {
      return this.controlDeviceInfo.assignmentToken;
    }
  },
  data() {
    return {
      tableData: [],
      searchForm: {}
    };
  },
  watch: {
    deviceToken: {
      handler(newVal) {
        if (newVal) {
          this.init();
        }
      },
      deep: true,
      immediate: true
    }
  },
  beforeDestroy() {
    console.log("离开任务历史查询 :>> ");
  },
  mounted() {},
  methods: {
    // 搜索
    onSearch(search) {
      if (search) {
        this.searchForm = search;
      } else {
        this.searchForm = {};
      }
      this.init();
    },
    async init() {
      this.tableData = [];
      const res = await getTaskFeedback({
        deviceToken: this.deviceToken,
        page: this.pageNum,
        pageSize: this.pageSize,
        ...this.searchForm,
        taskStatus: 2
      });
      const { results, numResults } = res.data;
      this.tableData = results;

      // this.tableData = results;
      // this.tableData = results;
      this.total = numResults;
    }
  }
};
</script>

<style lang="scss" scoped></style>
